<template>
    <div>
        <el-row class="mb">
            <el-col :span="6" class="pr">
                <el-card class="card-tip" shadow="always" style="background-color: #5470c6;">
					<div class="title">
						<span>用户统计</span>
						<el-tag size="mini" style="color:#5470c6;">实时</el-tag>
					</div>
					<div class="count">29</div>
					<div class="tip">当前总用户数量</div>
				</el-card>
            </el-col>
            <el-col :span="6" class="pr pl">
                <el-card class="card-tip" shadow="always" style="background-color: #9a60b4;">
					<div class="title">
						<span>商品统计</span>
						<el-tag size="mini" style="color:#9a60b4;">实时</el-tag>
					</div>
					<div class="count">918</div>
					<div class="tip">当前总商品数量</div>
				</el-card>
            </el-col>
            <el-col :span="6" class="pr pl">
                <el-card class="card-tip" shadow="always" style="background-color: #3ba272;">
					<div class="title">
						<span>订单统计</span>
						<el-tag size="mini" style="color:#3ba272;">实时</el-tag>
					</div>
					<div class="count">29</div>
					<div class="tip">当前总订单数量</div>
				</el-card>
            </el-col>
            <el-col :span="6" class="pl">
                <el-card class="card-tip" shadow="always" style="background-color: #fc8452;">
					<div class="title">
						<span>销售统计</span>
						<el-tag size="mini" style="color:#fc8452;">实时</el-tag>
					</div>
					<div class="count">2075</div>
					<div class="tip">当前总销售数量</div>
				</el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="pr">
                <el-card shadow="always">
                    <div class="region" ref="region"></div>
                </el-card>
            </el-col>
            <el-col :span="12" class="pl">
                <el-card shadow="always">
                    <div class="pages" ref="pages"></div>
                 </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts";
// 绘制图表
// myChart.setOption({
//     title: {
//         text: 'ECharts 入门示例'
//     },
//     tooltip: {},
//     xAxis: {
//         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
//     },
//     yAxis: {},
//     series: [{
//         name: '销量',
//         type: 'bar',
//         data: [5, 20, 36, 10, 10, 20]
//     }]
// });

import { loadUserReport } from "@/api/reports.js";
export default {
    props: ["h"],
    methods: {
        initRegionEcharts() {
            // 基于准备好的dom，初始化echarts实例
            // echarts.init(document.getElementById('main'));
            this.$region = echarts.init(this.$refs.region);
            // myChart.showLoading();
            // 绘制图表
            this.$region.setOption({
                title: {
                    text: "用户来源统计",
                    left: "center"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                    },
                },
                legend:{
                    top:"40"
                },
                grid: {
                    top: "80"
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                dataZoom: [
                    {
                        show: true,
                        start: 0,
                        end: 100,
                    },
                ],
            });
        },
        initPagesEcharts() {
            this.$pages = echarts.init(this.$refs.pages);
            this.$pages.setOption({
                title: {
                    text: "页面访问统计",
                    left: "center"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true,
                        },
                    },
                },
                legend:{
                    top:"40"
                },
                grid: {
                    top: "80"
                },
                xAxis: [
                    {
                        type: "category"
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                dataZoom: [
                    {
                        show: true,
                        start: 0,
                        end: 100,
                    },
                ],
                series: [],
            });
        },
        async loadUserReportData() {
            this.$region.showLoading();
            let result = await loadUserReport(1);
            // console.log(result);
            this.$region.setOption(result);
            this.$region.hideLoading();

            this.$pages.showLoading();
            let result2 = await loadUserReport(2);
            let xAxisData = [];
            let legendData = [];
            let series = {};
            let keys = Object.keys(result2).sort((a,b)=>{
                return new Date(a) > new Date(b)?1:-1;
            });
            for (const key of keys) {
                xAxisData.push(key);
                for (const item of result2[key]) {
                    if(!legendData.includes(item.rp2_page)){
                        legendData.push(item.rp2_page);
                    }
                    if(series[item.rp2_page]){
                        series[item.rp2_page].data.push(item.rp2_count);
                    }else{
                        series[item.rp2_page] = {
                            name:item.rp2_page,
                            type: "bar",
                            data:[item.rp2_count]
                        }
                    }
                }
            }
            let pageOption = {
                legend:{
                    data:legendData
                },
                xAxis:[
                    {
                        data:xAxisData
                    }
                ],
                series: Object.values(series),
            }
            this.$pages.setOption(pageOption);
            this.$pages.hideLoading();

        },
        initEchartsResize(){
            window.onresize = ()=>{
                // 随窗口变化，更新图标渲染结果
                this.$region.resize();
                this.$pages.resize();
            }
        }
    },
    mounted() {
        this.initRegionEcharts();
        this.initPagesEcharts();
        this.loadUserReportData();
        this.initEchartsResize();
    },
};
</script>
<style lang="less" scoped>
.region,
.pages {
    width: 100%;
    height: 500px;
}
.mb{
    margin-bottom: 20px;
}
.pl{
    padding-left: 10px;
}
.pr{
    padding-right: 10px;
}
.card-tip{
	color: white;
}
.card-tip::v-deep .el-card__body{
	padding: 10px 10px;
}
.card-tip .title{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	font-weight: bold;
	font-size: 14px;
}
.card-tip .count{
	font-size: 30px;
	text-align: center;
	padding: 8px 0px;
}
.card-tip .tip{
	font-size: 12px;
}
</style>